<template>
    <div>
        <div class="head">
            <span>用户列表>用户列表>用户详情</span>
        </div>
        <div class="information">
            <div>基本信息</div>
            <div class="information-view">
                <div class="information-view-a">
                    <div>
                      <img class="" :src='imgurl' />
                    </div>
                    <div >{{ nic }}</div>
                </div>
                <div class="information-view-b">
                    <div >真实姓名: <span class="tiao" @click="kainame">{{ name }}</span></div>
                    <div>手机号:<span class="tiao" @click="kaiphone">{{ phone}}</span></div>
                </div>
                <div class="information-view-b">
                    <div>注册时间:{{ zdate }}</div>
                    <div>最后访问:{{ zhdate }}</div>
                </div>
                <div class="information-view-b">
                    关注状态:{{ wx }}
                </div>
            </div>
        </div>
        <div class="property">
            <div class="property-head">资产信息</div>
            <div class="property-view">
                <div class="property-view-a">
                    <div>优惠卷(张)</div>
                    <div>{{you}}</div>
                    <!-- <div class="proaa tiao" @click="zsyou">赠送优惠卷</div> -->
                </div>
                <div class="property-view-b">
                    <div>余额</div>
                    <div>{{ money }}元</div>
                    <!-- <div class="proaa tiao" @click="zsmoney">赠送余额</div> -->
                </div>
            </div>
        </div>
        <div class="property">
            <div class="property-head">资产信息</div>
            <div class="property-view">
                <div class="property-view-c">
                    <div>累计支付订单数</div>
                    <div>{{lei}}</div>
                </div>
                <div class="property-view-c">
                    <div>累计支付金额</div>
                    <div>{{lmoney}}</div>
                </div>
                <div class="property-view-c">
                    <div>累计购买商品数</div>
                    <div>{{lshopping}}</div>
                </div>
            </div>
        </div>
        <!-- 修改姓名模态框 -->
        <div class="refuse" v-if="xiuname"> 
          <div class="passView">
            <div class="refuseView-X">
              <span>修改真实姓名</span>
              <span @click="close()">X</span>
            </div>
            <div class="increase">
                <div class="increase-a">
                    <input type="text" placeholder="请输入真实姓名" v-model="modifyname1">
                </div>
              <div class="increase-x">
                <button @click="modifyname()" class="closebutton">确定</button>
                <button @click="close()"   class="passbutton">取消</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 修改电话模态框 -->
        <div class="refuse" v-if="xiuphone"> 
          <div class="passView">
            <div class="refuseView-X">
              <span>修改手机号码</span>
              <span @click="close()">X</span>
            </div>
            <div class="increase">
                <div class="increase-a">
                    <input type="text" placeholder="请输入手机号" v-model="modifyphone1">
                </div>
              <div class="increase-x">
                <button @click="modifyphone()" class="closebutton">确定</button>
                <button @click="close()"   class="passbutton">取消</button>
              </div>
            </div>
          </div>
        </div>
        <!-- 赠送余额 -->
        <!-- <div class="refuse" v-if="smoney"> 
          <div class="passView">
            <div class="refuseView-X">
              <span>修赠余额</span>
              <span @click="close()">X</span>
            </div>
            <div class="increase">
                <div class="increase-a">
                    <input type="text" placeholder="请输入余额">
                </div>
              <div class="increase-x">
                <button @click="increasebutton()" class="closebutton">确定</button>
                <button @click="close()"   class="passbutton">取消</button>
              </div>
            </div>
          </div>
        </div> -->
        <!-- 赠送优惠卷模态框 -->
        <!-- <div class="refuse" v-if="passshow"> 
          <div class="passView1">
            <div class="refuseView-X">
              <span>赠送优惠卷</span>
              <span @click="close()">X</span>
            </div>
            <div class="refuseView-Y">
                <el-table
            :data="options"
            border
            style="width: 100%"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            >
            <el-table-column prop="label" label="优惠卷" width="289px" align="center" />
            <el-table-column fixed="right" label="操作" width="290px" align="center">
            <template #default="scope">
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="passK(scope.row)"
                style="color:white;border: 1px solid #ed742f;
                background-color: #ed742f;width: 60px;height: 30px;border-radius: 5px;"
                v-if="scope.row.xuan==true"
                >已选</el-button>
                <el-button
                link
                type="primary"
                size="small"
                @click.prevent="closeK(scope.row)"
                v-if="scope.row.xuan==false"
                style="color:#ed742f;border: 1px solid #81807f;
                background-color: white;width: 60px;height: 30px;border-radius: 5px;"
                >选择</el-button>
            </template>
            </el-table-column>
            </el-table>
              <div class="mobutton">
                <button @click="passbutton()"  class="closebutton" >确定</button>
                <button @click="close()" class="passbutton">取消</button>
              </div>
            </div>
          </div> -->
        <!-- </div> -->
    </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue';
import { useRoute } from 'vue-router';
import nuser from '@/service/user'
const router=useRoute()
const imgurl=ref()//图片地址
const nic=ref("蒲公英")//昵称
const name=ref('王八蛋')//姓名
const phone=ref('18025663537')//手机号
const zdate=ref('2020.05.20 15:20:09')//注册时间
const zhdate=ref('2020.05.20 15:20:09')//最后访问
const wx=ref('已收藏小程序')//关注状态
const you=ref('2')//优惠卷
const money=ref('23')//余额
const lei=ref('1512')//累计支付订单数
const lmoney=ref('22')//累计支付金额
const lshopping=ref('202')//累计购买商品数
const xiuname=ref(false) //修改姓名模态框
const xiuphone=ref(false) //修改姓名模态框
const smoney=ref(false) //赠送余额模态框
const passshow=ref(false)//赠送优惠卷模态框
const modifyname1=ref()//修改姓名的数字
const modifyphone1=ref()//修改电话的数字
let ID:any='' //用户id
// 用户标签选择的内容
const options = [
  {
    value: '标签1',
    label: '标签1',
    xuan:true
  },
  {
    value: '标签2',
    label: '标签2',
    xuan:false
  },
  {
    value: '标签3',
    label: '标签3',
    xuan:false
  },
  {
    value: '标签4',
    label: '标签4',
    xuan:false
  },
  {
    value: '标签5',
    label: '标签5',
    xuan:false
  },
]

// 打开修改姓名
const kainame=(()=>{
    xiuname.value=true
})
// 打开修改姓名
const kaiphone=(()=>{
    xiuphone.value=true
})
// 赠送余额
const zsmoney=(()=>{
    smoney.value=true
})
//赠送优惠卷
const zsyou=(()=>{
    passshow.value=true
})
// 关闭拒绝框
const close=(()=>{
    xiuname.value=false
    xiuphone.value=false
    smoney.value=false
    passshow.value=false
})
onBeforeMount(()=>{
  //获取用户信息
  ID=router.query.userId
  nuser.username(ID).then((res:any)=>{
    if(res.data.data==null){
      console.log('请求失败了');
    }
    let a=res.data.data
    a.lastLoginTime=a.lastLoginTime.substring(0,19) //截取时间
    a.lastLoginTime=a.lastLoginTime.replace('T',' ') //把T去了
    name.value=a.name
    nic.value=a.username
    phone.value=a.phone
    imgurl.value=a.image
    zdate.value=a.lastLoginTime
    zhdate.value=a.lastLoginTime
  })
  //用户优惠卷和余额
  nuser.useryu(ID).then((res:any)=>{
    if(res.data.data==null){
      console.log('用户优惠卷和余额请求失败了');
    }
    let a=res.data.data
    you.value=a.counts
    money.value=a.money
  })
  //用户资产
  nuser.usershoppding(ID).then((res:any)=>{
    if(res.data.data==null){
      console.log('用户优惠卷和余额请求失败了');
    }
    let a=res.data.data
    lei.value=a.userOrder
    lmoney.value=a.userCostMoney
    lshopping.value=a.userCostMoney
    
    if(lei.value==null){
      lei.value=0
    }
    if(lmoney.value==null){
      lmoney.value=0
    }
    if(lshopping.value==null){
      lshopping.value=0
    }
  })
  
})
//修改姓名
const modifyname=(()=>{
  // console.log('??');
  
  // console.log(ID);
  
  nuser.modifyname(ID,modifyname1.value,' ').then((res:any)=>{
    if(res.data.msg==null){
      console.log('修改姓名请求失败了');
    }
    let a=res.data.msg
    if(a=="操作成功"){
      xiuname.value=false
      alert(a)
    }else{
      alert(a)
    }
  })
})
//修改电话
const modifyphone=(()=>{
  //用户资产
  nuser.modifyphone(ID,' ',modifyphone1.value).then((res:any)=>{
    if(res.data.msg==null){
      console.log('修改姓名请求失败了');
    }
    let a=res.data.msg
    if(a=="操作成功"){
      alert(a)
      xiuphone.value=false
    }else{
      alert(a)
    }
  })
})
</script>

<style scoped lang="less">
.head{
    width: 100%;
    height: 40px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
.information{
    width: 100%;
    height: 170px;
    background-color: white;
    margin-top: 20px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px;
}
.information-view{
    display: flex;
    height: 130px;
    >div{
        width: 25%;
        height: 100%;

    }
}
.information-view-a{
    display: flex;
    flex-direction: column;
    align-items: center;
    >div:nth-child(1){
        width: 65px;
        height: 65px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
    }
    img{
      width: 65px;
        height: 65px;
        border-radius: 50%;
    }
}
.information-view-b{
    >div{
        margin-bottom: 10px;
    }
}
// 资产信息
.property{
    width: 100%;
    height: 244px;
    background-color: white;
    border-radius: 5px;
    margin-top: 10px;
    box-sizing: border-box;
    padding: 10px;
    .property-head{
        margin-bottom: 10px;
    }
    .property-view{
        display: flex;
    }
    .property-view-a{
        width: 300px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid rgb(205, 205, 205);
        border-radius: 10px;
        margin-left: 20px;
        box-shadow: 5px 5px 7px 0px #acabab;
        position: relative;
        >div:nth-child(1){
        position: absolute;
        top: 30px;
       }
       >div:nth-child(2){
        position: absolute;
        top: 60px;
        font-size: 20px;
       }
       >div:nth-child(3){
        position: absolute;
        top: 120px;
        right: 10px;
        color: #ed742f;
       }
       
    }
    .property-view-b{
        width: 300px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid rgb(205, 205, 205);
        border-radius: 10px;
        margin-left: 20px;
        box-shadow: 5px 5px 7px 0px #acabab;
        position: relative;
        >div:nth-child(1){
        position: absolute;
        top: 30px;
       }
       >div:nth-child(2){
        position: absolute;
        top: 60px;
        font-size: 20px;
        
       }
       >div:nth-child(3){
        position: absolute;
        top: 120px;
        right: 10px;
        color: #ed742f;
       }
    }
}
.property-view-c{
    width: 300px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        border: 1px solid rgb(205, 205, 205);
        border-radius: 10px;
        margin-left: 20px;
        box-shadow: 5px 5px 7px 0px #acabab;
        position: relative;
        >div:nth-child(1){
        position: absolute;
        top: 30px;
       }
       >div:nth-child(2){
        position: absolute;
        top: 70px;
        font-size: 20px;
        font-size: 22px;
       }
    
}

// 拒绝模态框
  // 模态框公共样式
  .refuse{
  position: fixed;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.6);
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
}

// 模态框公共样式
.refuseView-X{
  display: flex;
  align-items: center;
  justify-content:space-between ;
  border-bottom: 1px solid #e9e9e9;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
  width: 100%;
  height: 40px;
  span:nth-child(1){
    width: 100%;
    text-align: center;
  }
}
// 按钮

.closebutton{
      width: 80px;
      height: 35px;
      background-color: #ed742f;
      border: 1px solid #ed742f;
      color: white;
      border-radius: 5px;
      margin-right: 60px;
      margin-top: 20px;
      margin-left: 30px;
    }
.passbutton{
      width: 80px;
      height: 35px;
      color: black;
      background-color: white;
      border: 1px solid green;
      border-radius: 5px;
      margin-top: 20px;
    }
    // 通过的模态框
  .passView{
  position: absolute;
  width: 300px;
  height:150px;
  background-color: white;
  left:40%;
  top:35%;
  box-sizing: border-box;
  padding: 10px;
}
.passView1{
  position: absolute;
  width: 300px;
  height:150px;
  background-color: white;
  left:40%;
  top:35%;
  box-sizing: border-box;
  padding: 10px;
}
.increase{
    width: 100%;
    .increase-a{
        width: 100%;
        /deep/input{
            width: 200px !important;
            margin-top: 20px;
            margin-left: 40px;
        }
    }
}
// 点击事件的字
.tiao{
    color: #ed742f;
    cursor: pointer;
}
</style>